<!DOCTYPE html>

<html lang="zh-CN">

<head>
  
  <meta name="baidu-site-verification" content="code-J1Qg17G6wT" />
  <title>Vue知识点整理2 - 咔斯の小窝</title>
  <meta charset="UTF-8">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
  
  

    <!-- Site Verification -->
    <meta name="baidu-site-verification" content="code-7bF3wXCwO5" />

  <link rel="shortcut icon" href="https://s2.loli.net/2022/07/19/xKNvsPHqcyCL37d.png" type="image/png" />
  <meta name="description" content="Vue知识点整理2">
<meta property="og:type" content="article">
<meta property="og:title" content="Vue知识点整理2">
<meta property="og:url" content="https://blog.kassama.top/webNotes-vue2.html">
<meta property="og:site_name" content="咔斯の小窝">
<meta property="og:description" content="Vue知识点整理2">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2021-02-05T15:12:58.000Z">
<meta property="article:modified_time" content="2023-03-07T09:18:00.689Z">
<meta property="article:author" content="咔斯Sama">
<meta property="article:tag" content="Vue">
<meta property="article:tag" content="HTML">
<meta name="twitter:card" content="summary">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/combine/npm/highlight.js@9.15.8/styles/atom-one-dark.css,gh/theme-nexmoe/hexo-theme-nexmoe@latest/source/lib/mdui_043tiny/css/mdui.css,gh/theme-nexmoe/hexo-theme-nexmoe@latest/source/lib/iconfont/iconfont.css,gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css?v=233" crossorigin>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/justifiedGallery@3.8.1/dist/css/justifiedGallery.min.css">
  
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2421060_cksn56jaae6.css">
  
  <link rel="stylesheet" href="/css/style.css?v=1695462045633">
<meta name="generator" content="Hexo 6.1.0"></head>

<body class="mdui-drawer-body-left">
  
  <div id="nexmoe-background">
    <div class="nexmoe-bg" style="background-image: url(https://cdn.jsdelivr.net/gh/kasisama/Blog_images/background/bk1.webp)"></div>
    <div class="nexmoe-small" style="background-image: url(https://s2.loli.net/2022/07/19/QDhWb3BqyXLcdF8.png)"></div>
    <div class="mdui-appbar mdui-shadow-0">
      <div class="mdui-toolbar">
        <a mdui-drawer="{target: '#drawer', swipe: true}" title="menu" class="mdui-btn mdui-btn-icon mdui-ripple"><i class="mdui-icon nexmoefont icon-menu"></i></a>
        <div class="mdui-toolbar-spacer"></div>
        <!--<a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">search</i></a>-->
        <a href="/" title="咔斯Sama" class="mdui-btn mdui-btn-icon"><img src="https://cdn.jsdelivr.net/gh/kasisama/Blog_images/background/kasi.webp" alt="咔斯Sama"></a>
       </div>
    </div>
  </div>
  <div id="nexmoe-header">
      <div class="nexmoe-drawer mdui-drawer" id="drawer">
    <div class="nexmoe-avatar mdui-ripple">
        <a href="/" title="咔斯Sama">
            <img src="https://cdn.jsdelivr.net/gh/kasisama/Blog_images/background/kasi.webp" alt="咔斯Sama" alt="咔斯Sama">
        </a>
    </div>
    <div class="nexmoe-count">
        <div id="ks-articlesBtn" class="nexmoe-count-item"><span>文章</span>32 <div class="item-radius"></div><div class="item-radius item-right"></div> </div>
        <div id="ks-tagsBtn" class="nexmoe-count-item"><span>标签</span>14<div class="item-radius"></div><div class="item-radius item-right"></div></div>
        <div id="ks-categoriesBtn" class="nexmoe-count-item"><span>分类</span>6<div class="item-radius"></div><div class="item-radius item-right"></div></div>
    </div>
    <div class="nexmoe-list mdui-list" mdui-collapse="{accordion: true}">
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple" href="/" title="回到首页">
            <i class="mdui-list-item-icon nexmoefont icon-meishi"></i>
            <div class="mdui-list-item-content">
                回到首页
            </div>
        </a>
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple" href="/archives.html" title="文章归档">
            <i class="mdui-list-item-icon nexmoefont icon-hanbao1"></i>
            <div class="mdui-list-item-content">
                文章归档
            </div>
        </a>
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple" href="/friend.html" title="我的朋友">
            <i class="mdui-list-item-icon nexmoefont icon-cola"></i>
            <div class="mdui-list-item-content">
                我的朋友
            </div>
        </a>
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple" href="/photos.html" title="咔斯相册">
            <i class="mdui-list-item-icon nexmoefont icon-tuchong"></i>
            <div class="mdui-list-item-content">
                咔斯相册
            </div>
        </a>
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple" href="/about.html" title="关于咔斯">
            <i class="mdui-list-item-icon nexmoefont icon-jiubei1"></i>
            <div class="mdui-list-item-content">
                关于咔斯
            </div>
        </a>
        
    </div>
    <aside id="nexmoe-sidebar">
  
  
<!-- 站内搜索 -->

<div class="nexmoe-widget-wrap">
    <div class="nexmoe-widget nexmoe-search" >
        <form id="search-form">
            <label><input type="text" id="local-search-input" name="q" results="0" placeholder="站内搜索" class="input form-control" autocomplete="off" autocorrect="off"/></label>
            <!-- 清空/重置搜索框 -->
            <i class="fa fa-times" onclick="resetSearch()"></i>
        </form>
    </div>
    <div id="local-search-result"></div> <!-- 搜索结果区 -->
    <!-- <p class='no-result'></p> 无匹配时显示，注意在 CSS 中设置默认隐藏 -->
</div>


  
  <div class="nexmoe-widget-wrap">
    <div class="nexmoe-widget nexmoe-social">
        <a class="mdui-ripple" href="http://wpa.qq.com/msgrd?v=3&uin=1347993953&site=qq&menu=yes" target="_blank" mdui-tooltip="{content: 'QQ'}" style="color: rgb(64, 196, 255);background-color: rgba(64, 196, 255, .1);">
            <i class="nexmoefont icon-QQ"></i>
        </a><a class="mdui-ripple" href="https://steamcommunity.com/id/kasiwuhui/" target="_blank" mdui-tooltip="{content: 'steam'}" style="color: rgb(14, 71, 161);background-color: rgba(14, 71, 161, .15);">
            <i class="nexmoefont icon-steam"></i>
        </a><a class="mdui-ripple" href="mailto:kasiwuhui@vip.qq.com" target="_blank" mdui-tooltip="{content: 'mail'}" style="color: rgb(249,8,8);background-color: rgba(249,8,8,.1);">
            <i class="nexmoefont icon-mail-fill"></i>
        </a><a class="mdui-ripple" href="https://space.bilibili.com/93548600" target="_blank" mdui-tooltip="{content: '哔哩哔哩'}" style="color: rgb(231, 106, 141);background-color: rgba(231, 106, 141, .15);">
            <i class="nexmoefont icon-bilibili"></i>
        </a><a class="mdui-ripple" href="https://github.com/kasisama/" target="_blank" mdui-tooltip="{content: 'GitHub'}" style="color: rgb(25, 23, 23);background-color: rgba(25, 23, 23, .15);">
            <i class="nexmoefont icon-github"></i>
        </a><a class="mdui-ripple" href="https://gitee.com/kassama" target="_blank" mdui-tooltip="{content: 'gitee'}" style="color: rgb(199, 29, 35);background-color: rgba(199, 29, 35, .15);">
            <i class="nexmoefont icon-mayun"></i>
        </a>
    </div>
</div>
  
  
  <div class="nexmoe-widget-wrap">
    <div id="randomtagcloud" class="nexmoe-widget tagcloud nexmoe-rainbow">
      <a href="/tags/CDN/" style="font-size: 10px;">CDN</a> <a href="/tags/HTML/" style="font-size: 20px;">HTML</a> <a href="/tags/Linux/" style="font-size: 12.5px;">Linux</a> <a href="/tags/NodeJs/" style="font-size: 12.5px;">NodeJs</a> <a href="/tags/QWQ/" style="font-size: 10px;">QWQ</a> <a href="/tags/Ubuntu/" style="font-size: 12.5px;">Ubuntu</a> <a href="/tags/Vue/" style="font-size: 15px;">Vue</a> <a href="/tags/web/" style="font-size: 17.5px;">web</a> <a href="/tags/wiki/" style="font-size: 12.5px;">wiki</a> <a href="/tags/%E5%8D%9A%E5%AE%A2/" style="font-size: 10px;">博客</a> <a href="/tags/%E5%92%94%E6%96%AF/" style="font-size: 10px;">咔斯</a> <a href="/tags/%E5%92%94%E6%96%AF%E5%A8%B1%E4%B9%90/" style="font-size: 10px;">咔斯娱乐</a> <a href="/tags/%E5%AE%A0%E7%89%A9%E5%85%BB%E6%88%90/" style="font-size: 12.5px;">宠物养成</a> <a href="/tags/%E6%9C%8D%E5%8A%A1%E6%9D%A1%E6%AC%BE/" style="font-size: 10px;">服务条款</a>
    </div>
    
  </div>

  
  
  <div class="nexmoe-widget-wrap">
    <h3 class="nexmoe-widget-title">文章分类</h3>
    <div class="nexmoe-widget">

      <ul class="category-list">

        


        

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/web笔记/">web笔记</a>
          <span class="category-list-count">23</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/wiki/">wiki</a>
          <span class="category-list-count">2</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/公告/">公告</a>
          <span class="category-list-count">1</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/备忘/">备忘</a>
          <span class="category-list-count">1</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/日志/">日志</a>
          <span class="category-list-count">4</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/遇坑记录/">遇坑记录</a>
          <span class="category-list-count">1</span>
        </li>

        
      </ul>

    </div>
  </div>


  
  
  <div class="nexmoe-widget-wrap">
    <h3 class="nexmoe-widget-title">文章归档</h3>
    <div class="nexmoe-widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/">2022</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/">2021</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/">2020</a><span class="archive-list-count">20</span></li></ul>
    </div>
  </div>


<style>
.nexmoe-widget .archive-list-count{
	position : absolute;
	right: 15px;
	top:9px;
	color: #DDD;
}
</style>

  
</aside>
    <div class="nexmoe-copyright">
        &copy; 2023 咔斯Sama
        Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
        & <a href="https://github.com/theme-nexmoe/hexo-theme-nexmoe" target="_blank">Nexmoe</a><br/>
        <a href="http://beian.miit.gov.cn" target="_blank"></a><br/>
        
        <div style="font-size: 12px">
            <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
            本站总访问量  <a id="busuanzi_value_site_pv"></a> 次<br />
            本站访客数<a id="busuanzi_value_site_uv"></a>人次
        </div>
        
        
    </div>

</div><!-- .nexmoe-drawer -->

  </div>
  <div id="nexmoe-content">
    <div class="nexmoe-primary">
        <div class="nexmoe-post">
    
        <div class="nexmoe-post-cover" style="padding-bottom: 35.25%;">
            <img data-src="https://cdn.jsdelivr.net/gh/kasisama/Blog_images/Otherimgage/vueLearn.webp" data-sizes="auto" alt="Vue知识点整理2" class="lazyload">
            <h1>Vue知识点整理2</h1>
        </div>
    

        <div class="nexmoe-post-meta nexmoe-rainbow" style="margin:10px 0!important;">
    <a><i class="nexmoefont icon-calendar-fill"></i>2021年02月05日</a>
    <a><i class="nexmoefont icon-areachart"></i>3.5k 字</a>
    <a><i class="nexmoefont icon-time-circle-fill"></i>大概 14 分钟</a>
</div>


        <article>
            <p>Vue知识点整理2</p>
<span id="more"></span>
<h2 id="本地应用"><a href="#本地应用" class="headerlink" title="本地应用"></a>本地应用</h2><h3 id="内容绑定，事件绑定"><a href="#内容绑定，事件绑定" class="headerlink" title="内容绑定，事件绑定"></a>内容绑定，事件绑定</h3><h4 id="v-text"><a href="#v-text" class="headerlink" title="v-text"></a>v-text</h4><p><code>v-text</code>：指令的作用是设置标签的内容(textContent)默认写法会替换全部内容，使用差值表达式<code>&#123;&#123;&#125;&#125;</code>可以替换指定内容，内部支持写表达式。</p>
<h4 id="v-htm"><a href="#v-htm" class="headerlink" title="v-htm"></a>v-htm</h4><p><code>v-html</code>：指令的作用是设置元素的innerHTML，内容中有html结构会被解析为标签。</p>
<h4 id="v-on基础"><a href="#v-on基础" class="headerlink" title="v-on基础"></a>v-on基础</h4><p><code>v-on</code>：指令的作用是为元素绑定事件，事件名不需要写on，指令可以简写为@，绑定的方法定义在methods属性中，方法内部通过this关键字可以访问定义在data中的数据。</p>
<h3 id="显示切换，属性绑定"><a href="#显示切换，属性绑定" class="headerlink" title="显示切换，属性绑定"></a>显示切换，属性绑定</h3><h4 id="v-show"><a href="#v-show" class="headerlink" title="v-show"></a>v-show</h4><p><code>v-show</code>：指令的作用是根据真假切换元素的显示状态，原理是修改元素的display，实现显示隐藏，指令后面的内容，最终都会解析为布尔值，值为true元素显示，值为false元素隐藏，数据改变之后，对应元素的显示状态会同步更新。</p>
<h4 id="v-if"><a href="#v-if" class="headerlink" title="v-if"></a>v-if</h4><p><code>v-if</code>：指令的作用是根据表达式的真假切换元素的显示状态，本质是通过操作dom元素来切换显示状态，表达式的值为true，元素存在于dom树中，为false，从dom树中移除，频繁的切换v-show，反之使用v-if,前者的切换消耗小</p>
<h4 id="v-bind"><a href="#v-bind" class="headerlink" title="v-bind"></a>v-bind</h4><p><code>v-bind</code>：指令的作用是为元素绑定属性，完整写法是v-bind:属性名，简写的话可以直接省略v-bind，只保留:属性名，需要动态的增删class建议使用对象的方式</p>
<h3 id="列表循环，表单元素绑定"><a href="#列表循环，表单元素绑定" class="headerlink" title="列表循环，表单元素绑定"></a>列表循环，表单元素绑定</h3><h4 id="v-for"><a href="#v-for" class="headerlink" title="v-for"></a>v-for</h4><p><code>v-for</code>：指令的作用是根据数据生成列表结构，数组经常和v-for结合使用，语法是(item,index)in数据，item和index可以结合其他指令一起使用，数组长度的更新会同步到页面上，是响应式的</p>
<h4 id="v-on补充"><a href="#v-on补充" class="headerlink" title="v-on补充"></a>v-on补充</h4><p>事件绑定的方法写成函数调用的形式，可以传入自定义参数，定义方法时需要定义形参来接收传入的实参，事件的后面跟上.修饰符可以对事件进行限制，.enter可以限制触发的按键为回车，事件修饰符有多种</p>
<h4 id="v-model"><a href="#v-model" class="headerlink" title="v-model"></a>v-model</h4><p><code>v-model</code>：指令的作用时便捷的设置和获取表单元素的值，绑定的数据会和表单元素值相关联，绑定的数据&lt;——&gt;表单元素的值</p>
<h2 id="生命周期"><a href="#生命周期" class="headerlink" title="生命周期"></a>生命周期</h2><p><code>生命周期</code>: 一个vue对象从创建到销毁的整个过程<br><code>生命周期函数</code>: 也叫生命周期钩子, 是在生命周期过程中主动调用的一些函数</p>
<h3 id="钩子函数"><a href="#钩子函数" class="headerlink" title="钩子函数"></a>钩子函数</h3><h4 id="vue的钩子函数有四个过程-对应八个函数"><a href="#vue的钩子函数有四个过程-对应八个函数" class="headerlink" title="vue的钩子函数有四个过程, 对应八个函数"></a>vue的钩子函数有<code>四个过程</code>, 对应<code>八个函数</code></h4><p>  创建过程 <code>beforeCreate</code> 创建前  和  <code>created</code> 创建后<br>  渲染过程 <code>beforeMount</code> 渲染前  和  <code>mounted</code> 渲染后<br>  更新过程 <code>beforeUpdate</code> 更新前  和 <code>updated</code> 更新后<br>  销毁过程 <code>beforeDestroy</code> 销毁前 和 <code>destroyed</code> 销毁后</p>
<h2 id="深度监听"><a href="#深度监听" class="headerlink" title="深度监听"></a>深度监听</h2><h3 id="常见的三种数据更新-视图不更新的特殊情况"><a href="#常见的三种数据更新-视图不更新的特殊情况" class="headerlink" title="常见的三种数据更新,视图不更新的特殊情况"></a>常见的三种数据更新,视图不更新的特殊情况</h3><ol>
<li>data中的数组通过索引更新数据,但数组长度不变</li>
<li>没有在data中定义的数据更新</li>
<li>data中的对象, 初始化后添加的字段更新</li>
</ol>
<p>深度监听: 主要针对以上第三种监听不到的情况, 用于监听对象的更新</p>
<h3 id="常用的两种解决方案"><a href="#常用的两种解决方案" class="headerlink" title="常用的两种解决方案"></a>常用的两种解决方案</h3><ol>
<li>强制刷新,适用于所有情况  this.$forceUpdate()</li>
<li>$set更新, 使用数组更新  this.$set(arr, index, value)</li>
</ol>
<h2 id="指令修饰符"><a href="#指令修饰符" class="headerlink" title="指令修饰符"></a>指令修饰符</h2><p><code>指令修饰符</code>: 在指令后打点调用的属性字段,用于给指令添加特有功能</p>
<ol>
<li>.number 用于双向绑定,使表单中的数据自动转化为数字类型</li>
<li>.trim  用于双向绑定, 取出表单输入字符前后空格</li>
<li>.prevent 用于事件绑定,阻止事件默认行为</li>
<li>.stop 用于事件绑定, 阻止事件冒泡</li>
<li>.once 用于事件绑定, 限制事件只能触发一次</li>
<li>.shift 用于键盘事件, 指定那些键会触发事件</li>
<li>.prop 用于属性绑定, 可以把标签的attribute属性改成property属性</li>
<li>.capture 用于事件, 默认事件在冒泡过程执行, 它可以使事件在挖洞过程执行</li>
<li>.self 用于事件, 只能由元素自身触发事件,不能由子元素冒泡触发</li>
<li>.left  .right  .middle 仅当点击特定的鼠标按钮时会处理执行函数</li>
<li>.lazy  用于双向绑定  输入时不更新数据, 输入完成时更新相当于change事件</li>
</ol>
<h3 id="vue中的指令修饰符有哪些"><a href="#vue中的指令修饰符有哪些" class="headerlink" title="vue中的指令修饰符有哪些?"></a>vue中的指令修饰符有哪些?</h3><p>常用:    <code>trim</code>  <code>lazy</code>  <code>number</code>  <code>stop</code>  <code>prevent</code>  <code>enter</code><br>不常用:  <code>prop</code>  <code>capture</code>  <code>self</code>  <code>left</code>  <code>right</code>  <code>middle</code>  <code>once</code></p>
<h2 id="组件"><a href="#组件" class="headerlink" title="组件"></a>组件</h2><h3 id="什么是组件"><a href="#什么是组件" class="headerlink" title="什么是组件?"></a>什么是组件?</h3><p>当一个页面数据视图异常庞大,里边的数据逻辑非常多, 造成页面复杂臃肿, 不易于阅读,调试,更新, 此时, 我们可以把一个页面拆分开, 把页面中一个个<code>独立的功能模块单独分开</code>,<code>独立实现此模块的模板</code>,<code>样式和逻辑</code>, 分割成的每一个模块 叫做 <code>组件</code>, 这就是<code>组件化编程</code> 也是 vue框架的一个好处</p>
<h3 id="组件化有什么好处"><a href="#组件化有什么好处" class="headerlink" title="组件化有什么好处?"></a>组件化有什么好处?</h3><p>使项目结构清晰, 更容易阅读和维护更新, 每一个组件之间作用域相互隔离, 互不干涉, 类似于前端模块化</p>
<h3 id="如果创建一个组件"><a href="#如果创建一个组件" class="headerlink" title="如果创建一个组件?"></a>如果创建一个组件?</h3><p>根组件: 使用<code>new Vue()</code>创建的vue对象就是vue根组件, 全局唯一<br>全局组件: 使用<code>Vue.component()</code>创建的对象就是全局组件,在所有组件模板中可用<br>局部组件: 在组件的<code>components</code>字段中定义的组件是局部组件,之能在其定义的组件模板中使用</p>
<h3 id="组件如何使用"><a href="#组件如何使用" class="headerlink" title="组件如何使用?"></a>组件如何使用?</h3><p>组件可以认为是自定义标签, 直接当作标签来用即可, 叫做组件标签</p>
<h3 id="组件需要注意的细节"><a href="#组件需要注意的细节" class="headerlink" title="组件需要注意的细节?"></a>组件需要注意的细节?</h3><p>组件模板使用<code>template</code>属性绑定模板字符串或独立模板<br>vue内置组件<code>template</code>模板要求有且仅有一个根元素<br>组件数据<code>data</code>是一个函数,不是对象<br>html标签<code>不支持大写</code>, 如果组件名用驼峰定义, 那么组件标签名应用<code>小写 - 分割</code></p>
<h3 id="为什么组件中的data是一个函数而不是对象"><a href="#为什么组件中的data是一个函数而不是对象" class="headerlink" title="为什么组件中的data是一个函数而不是对象?"></a>为什么组件中的data是一个函数而不是对象?</h3><p><code>组件一般不是唯一的</code>,是需要复用的,如果组件中data是个对象, 在复用, 引用的是对象的内存地址,相当于<code>浅拷贝</code>, 结果一个组件数据变化时,另一个组件会受到影响, 所以data是一个函数, 返回一个新的对象, 这样每次调用组件, 都会得到一个新的对象,属于<code>深拷贝</code>, 使各个组件数据<code>相互独立</code>,不影响</p>
<h2 id="传值"><a href="#传值" class="headerlink" title="传值"></a>传值</h2><h3 id="插槽"><a href="#插槽" class="headerlink" title="插槽"></a>插槽</h3><p>在组件标签的开始标签和结束标签中写的数据叫<code>插槽数据</code>, 插槽数据默认不会展示到子组件模板中, 可以使用vue内置组件<code>slot</code>, 在子组件模板中展示插槽数据，插槽数据不只是字符串也可以是一段html代码<br>在子组件标签中要插入data动态数据, 数据来源于父组件, 会展示到子组件中, 这种方式叫做: <code>组件传值</code></p>
<h3 id="组件传值"><a href="#组件传值" class="headerlink" title="组件传值"></a>组件传值</h3><p><code>组件传值</code>: 把一个组件中的数据传入另一个组件中展示 使使用插槽slot把父组件数据传入子组件展示, 叫做插槽传值<br><code>slot</code> 标签就是插槽, 用于展示组件标签中的数据, 每一个slot标签都会展示一遍数据</p>
<h3 id="props"><a href="#props" class="headerlink" title="props"></a>props</h3><h4 id="父组件向子组件传值"><a href="#父组件向子组件传值" class="headerlink" title="父组件向子组件传值:"></a>父组件向子组件传值:</h4><ol>
<li>在子组件对象的<code>props</code>字段中定义属性：<code>props: [&quot;childCount&quot;]</code></li>
<li>在子组件标签上绑定自定义属性并赋值：<code>&lt;mycom :child-count=&quot;father&quot;&gt;&lt;/mycom&gt;</code></li>
<li>在子组件对象或模板中调用自定义属性, 调用方式和data数据相同：<code>&lt;div&gt;子组件: &#123;&#123;child&#125;&#125;&lt;/div&gt;</code></li>
</ol>
<h4 id="slot插槽传值-和-props属性传值-的异同点"><a href="#slot插槽传值-和-props属性传值-的异同点" class="headerlink" title="slot插槽传值 和 props属性传值 的异同点?"></a>slot插槽传值 和 props属性传值 的异同点?</h4><p><code>相同点</code>: 都是用于父组件向子组件传值<br><code>不同点</code>: 插槽数据仅用于模板展示,不能在组件对象中调用和修改, 而props属性传值可以在组件中调用,过滤,监听,计算等操作</p>
<h3 id="emit"><a href="#emit" class="headerlink" title="emit"></a>emit</h3><h4 id="子组件向父组件传值"><a href="#子组件向父组件传值" class="headerlink" title="子组件向父组件传值:"></a>子组件向父组件传值:</h4><ol>
<li>定义一个自定义事件, 使用<code>this.$emit()</code> 发射事件把数据传出去： <code>this.$emit(&quot;myevent&quot;, this.childCount)</code></li>
<li>在子组件标签上绑定自定义事件, 调用事件函数：<code>&lt;mycom @myevent=&quot;getData&quot;&gt;&lt;/mycom&gt;</code></li>
<li>在父组件中的事件回调中, 获取数据并赋值：<code>getData(data)&#123;this.father = data&#125;</code></li>
</ol>
<h3 id="bus总线"><a href="#bus总线" class="headerlink" title="bus总线"></a>bus总线</h3><h4 id="兄弟组件传值："><a href="#兄弟组件传值：" class="headerlink" title="兄弟组件传值："></a>兄弟组件传值：</h4><ol>
<li>在全局作用域创建一个空的vue对象, 称之为bus总线：<code>var bus = new Vue()</code></li>
<li>在发送数据的组件中, 使用bus总线发起自定义事件, 发送数据：<code>bus.$emit(&quot;event&quot;, this.count)</code></li>
<li>在接收数据的组件中， 使用bus绑定事件接收数据：<code>bus.$on(&quot;event&quot;, data=&gt;&#123;this.count2 = data&#125;）</code></li>
</ol>
<h2 id="自定义指令"><a href="#自定义指令" class="headerlink" title="自定义指令"></a>自定义指令</h2><pre><code>全局自定义指令：`Vue.directive(&quot;binge&quot;, function(el,obj,c)&#123;&#125;`  参数1：`指令所在的元素`，参数2：`指令名对象`  参数3：`指令配置对象`
定义局部vue指令: 只能在当前vue模板中使用
</code></pre>
<pre><code class="highlight js"><span class="attr">directives</span>:&#123;
    <span class="title function_">color</span>(<span class="params">a,b,c</span>)&#123;
        <span class="variable language_">console</span>.<span class="title function_">log</span>(a,b,c)
        a.<span class="property">style</span>.<span class="property">color</span> = b.<span class="property">value</span>;
    &#125;
&#125;</code></pre>
<h2 id="异步更新"><a href="#异步更新" class="headerlink" title="异步更新"></a>异步更新</h2><p>由于vue数据的更新是同步的, 更新后数据<code>this.name</code>立即改为最新值<br>但是视图的更新是异步的, 数据更新后, 视图并没有立即更新, 所以打印视图结果还是更新前的结果<br>如果想在视图更新结束后,打印视图的显示, 可以在异步更新回调中执行<br><code>this.$nextTick(()=&gt;&#123;&#125;)</code>异步更新队列, 参数是视图更新完成的回调函数</p>
<h2 id="监视器"><a href="#监视器" class="headerlink" title="监视器"></a>监视器</h2><h3 id="watch监视器的监视原理"><a href="#watch监视器的监视原理" class="headerlink" title="watch监视器的监视原理?"></a>watch监视器的监视原理?</h3><p>当vue初始化时,会使用<code>Object.defineProperty()</code>对data数据进行重定义和数据拦截, 在set函数中,判断此属性是否在watch监视器中被监视, 如果是,调用<code>new Watcher</code>创建watcher对象并和此属性进行绑定, 把回调函数传入watch监视器的函数参数中, 当监视的属性发生变化时, 会去执行set函数, 在set函数中调用watcher对象的回调, 也就是watch监视器中的监视函数 (使用原理还是回调原理) 类似于发布订阅模式</p>
<h2 id="重用机制"><a href="#重用机制" class="headerlink" title="重用机制"></a>重用机制</h2><p>重用机制: 也叫惰性机制, 指vue模板中的结构在销毁重建过程中,如果销毁和重建的标签结构相同, 则不再执行销毁和重建过程, 而是把要销毁的标签修改属性后直接拿来用<br>好处: 可以减少DOM创建销毁, 节省内存, 提高渲染效率<br>弊端: 表单中输入的数据内容没有重置, 可能暴漏隐私信息, 或造成更新渲染异常</p>
<h3 id="那如何解决重用机制弊端-如何避免重用机制发生"><a href="#那如何解决重用机制弊端-如何避免重用机制发生" class="headerlink" title="那如何解决重用机制弊端, 如何避免重用机制发生?"></a>那如何解决重用机制弊端, 如何避免重用机制发生?</h3><ol>
<li>解决方案1: 使创建销毁前后的标签结构不同, 即可避免重用机制</li>
<li>解决方案2: 给创建销毁前后的标签设置属性key以不同的值, 可以避免重用机制</li>
<li>key属性是给vue模板中元素的唯一标识,可以使vue视图时更加准确的识别每一个DOM元素,提高渲染的效率, 在v-for循环中建议给每一个循环的元素添加不同的属性key值, 以避免重用机制造成的渲染异常</li>
</ol>
<h2 id="计算属性"><a href="#计算属性" class="headerlink" title="计算属性"></a>计算属性</h2><h3 id="计算属性是如何缓存数据的"><a href="#计算属性是如何缓存数据的" class="headerlink" title="计算属性是如何缓存数据的?"></a>计算属性是如何缓存数据的?</h3><p>计算属性每次计算完结果, 会把计算结果赋值给一个全局变量, 当数据更新时, vue会判断计算属性依赖的数据源有没有更新,用一个变量dirty(脏值)记录源数据状态, 如果计算属性依赖的源数据没有变化, 会脏值记录为false, 如果有变化, 脏值被记录为true, 之后开始更新视图, 在数据更新到计算属性处, 执行脏值判断, 如果脏值为true,则重新执行计算属性计算过程, 如果脏值为false, 则直接返回全局变量记录的计算结果</p>
<h2 id="Vue基础"><a href="#Vue基础" class="headerlink" title="Vue基础"></a>Vue基础</h2><h3 id="Vue简介"><a href="#Vue简介" class="headerlink" title="Vue简介"></a>Vue简介</h3><p>JsvaScript框架<br>简化Dom操作<br>响应式数据驱动<br>官方网址：<a target="_blank" rel="noopener" href="https://cn.vuejs.org/">https://cn.vuejs.org</a></p>
<h3 id="第一个Vue程序"><a href="#第一个Vue程序" class="headerlink" title="第一个Vue程序"></a>第一个Vue程序</h3><p>步骤: </p>
<ol>
<li>导入开发版本Vue.js</li>
<li>创建Vue实例对象，设置el属性和data属性</li>
<li>使用简洁的模板语法把数据渲染到页面上</li>
</ol>
<p><u>开发环境版本，包含了有帮助的命令行警告</u></p>
<pre><code class="highlight html">
<span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span>
  <span class="comment">&lt;!-- Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统： --&gt;</span>
  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span>   &#123; &#123; message &#125; &#125;   <span class="tag">&lt;/<span class="name">div</span>&gt;</span>

  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span>
<span class="language-javascript">    <span class="keyword">var</span> app = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span>
<span class="language-javascript">      <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span>
<span class="language-javascript">      <span class="attr">data</span>: &#123;<span class="attr">message</span>: <span class="string">&#x27;Hello Vue!&#x27;</span>&#125;</span>
<span class="language-javascript">    &#125;);</span>
<span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span>
</code></pre>

<h4 id="el：挂载点"><a href="#el：挂载点" class="headerlink" title="el：挂载点"></a>el：挂载点</h4><p><code>el</code>是用来设置<code>Vue实例挂载（管理）</code>的元素<br>Vue会管理<code>el</code>选项命中的元素及其内部的后代元素<br>可以使用其他选择器，但是建议使用<code>ID选择器</code><br>可以使用其他的双标签，<code>不能使用HTML和BODY</code></p>
<h4 id="data：数据对象"><a href="#data：数据对象" class="headerlink" title="data：数据对象"></a>data：数据对象</h4><p>Vue中用到的数据定义在<code>data</code>中<br><code>data</code>中可以写复杂数据类型的数据<br>渲染复杂类型数据时，遵守js的语法即可</p>

        </article>

        
            
  <div class="nexmoe-post-copyright">
    <strong>本文作者：</strong>咔斯Sama<br>
    
    <strong>本文链接：</strong><a href="https://blog.kassama.top/webNotes-vue2.html" title="https:&#x2F;&#x2F;blog.kassama.top&#x2F;webNotes-vue2.html" target="_blank" rel="noopener">https:&#x2F;&#x2F;blog.kassama.top&#x2F;webNotes-vue2.html</a><br>

    
      <strong>版权声明：</strong>本文采用 <a href="https://creativecommons.org/licenses/by-nc-sa/3.0/cn/deed.zh" target="_blank">CC BY-NC-SA 3.0 CN</a> 协议进行许可
    
  </div>


        

        <div class="nexmoe-post-meta nexmoe-rainbow">
    
        <a class="nexmoefont icon-appstore-fill -link" href="/categories/web%E7%AC%94%E8%AE%B0/">web笔记</a>
    
    
        <a class="nexmoefont icon-tag-fill -none-link" href="/tags/HTML/" rel="tag">HTML</a> <a class="nexmoefont icon-tag-fill -none-link" href="/tags/Vue/" rel="tag">Vue</a>
    
</div>

    <div class="nexmoe-post-footer">
        <section class="nexmoe-comment">
    <!-- <div class="valine ks-valine-box"></div> -->
<script src='https://lib.baomitu.com/valine/1.5.1/Valine.min.js'></script>
<script>
    // 使用方法 https://valine.js.org/quickstart.html
    new Valine({
        el: '.valine',
        appId: '6Om9oV6sycmCPkRcrF9VR7Vd-gzGzoHsz',
        appKey: 'cas3l5T4L8EkjrOFGsfzD8vM',
        enableQQ: true,
        placeholder: '阁下要说点什么嘛！',
        requiredFields:['nick','mail'],

        emojiCDN: '//cdn.bilicdn.tk/gh/kasisama/ValineCDN@master/',
        // 表情title和图片映射
        emojiMaps: {
            "bilibilitv2": "bilibilitv/[tv_doge].png",
            "bilibilitv3": "bilibilitv/[tv_亲亲].png",
            "bilibilitv4": "bilibilitv/[tv_偷笑].png",
            "bilibilitv5": "bilibilitv/[tv_再见].png",
            "bilibilitv6": "bilibilitv/[tv_冷漠].png",
            "bilibilitv7": "bilibilitv/[tv_发怒].png",
            "bilibilitv8": "bilibilitv/[tv_发财].png",
            "bilibilitv9": "bilibilitv/[tv_可爱].png",
            "bilibilitv10": "bilibilitv/[tv_吐血].png",
            "bilibilitv11": "bilibilitv/[tv_呆].png",
            "bilibilitv12": "bilibilitv/[tv_呕吐].png",
            "bilibilitv13": "bilibilitv/[tv_困].png",
            "bilibilitv14": "bilibilitv/[tv_坏笑].png",
            "bilibilitv15": "bilibilitv/[tv_大佬].png",
            "bilibilitv16": "bilibilitv/[tv_大哭].png",
            "bilibilitv17": "bilibilitv/[tv_委屈].png",
            "bilibilitv18": "bilibilitv/[tv_害羞].png",
            "bilibilitv19": "bilibilitv/[tv_尴尬].png",
            "bilibilitv20": "bilibilitv/[tv_微笑].png",
            "bilibilitv21": "bilibilitv/[tv_思考].png",
            "bilibilitv22": "bilibilitv/[tv_惊吓].png",
            "bilibilitv23": "bilibilitv/[tv_打脸].png",
            "bilibilitv24": "bilibilitv/[tv_抓狂].png",
            "bilibilitv25": "bilibilitv/[tv_抠鼻].png",
            "bilibilitv26": "bilibilitv/[tv_斜眼笑].png",
            "bilibilitv27": "bilibilitv/[tv_无奈].png",
            "bilibilitv28": "bilibilitv/[tv_晕].png",
            "bilibilitv29": "bilibilitv/[tv_流汗].png",
            "bilibilitv30": "bilibilitv/[tv_流泪].png",
            "bilibilitv31": "bilibilitv/[tv_流鼻血].png",
            "bilibilitv32": "bilibilitv/[tv_点赞].png",
            "bilibilitv33": "bilibilitv/[tv_生气].png",
            "bilibilitv34": "bilibilitv/[tv_生病].png",
            "bilibilitv35": "bilibilitv/[tv_疑问].png",
            "bilibilitv36": "bilibilitv/[tv_白眼].png",
            "bilibilitv37": "bilibilitv/[tv_皱眉].png",
            "bilibilitv38": "bilibilitv/[tv_目瞪口呆].png",
            "bilibilitv39": "bilibilitv/[tv_睡着].png",
            "bilibilitv40": "bilibilitv/[tv_笑哭].png",
            "bilibilitv41": "bilibilitv/[tv_腼腆].png",
            "bilibilitv42": "bilibilitv/[tv_色].png",
            "bilibilitv43": "bilibilitv/[tv_调侃].png",
            "bilibilitv44": "bilibilitv/[tv_调皮].png",
            "bilibilitv45": "bilibilitv/[tv_鄙视].png",
            "bilibilitv46": "bilibilitv/[tv_闭嘴].png",
            "bilibilitv47": "bilibilitv/[tv_难过].png",
            "bilibilitv48": "bilibilitv/[tv_馋].png",
            "bilibilitv49": "bilibilitv/[tv_鬼脸].png",
            "bilibilitv50": "bilibilitv/[tv_黑人问号].png",
            "bilibilitv51": "bilibilitv/[tv_鼓掌].png",
            "Heybox1": "Heybox/expression_cube.png",
            "Heybox2": "Heybox/expression_cube_bingbujiandan.png",
            "Heybox3": "Heybox/expression_cube_bizui.png",
            "Heybox4": "Heybox/expression_cube_cangsang.png",
            "Heybox5": "Heybox/expression_cube_dalian.png",
            "Heybox6": "Heybox/expression_cube_doge.png",
            "Heybox7": "Heybox/expression_cube_gandong.png",
            "Heybox8": "Heybox/expression_cube_guai.png",
            "Heybox9": "Heybox/expression_cube_gugu.png",
            "Heybox10": "Heybox/expression_cube_han.png",
            "Heybox11": "Heybox/expression_cube_hbi.png",
            "Heybox12": "Heybox/expression_cube_heirenwenhao.png",
            "Heybox13": "Heybox/expression_cube_huaji.png",
            "Heybox14": "Heybox/expression_cube_jiayou.png",
            "Heybox15": "Heybox/expression_cube_jingya.png",
            "Heybox16": "Heybox/expression_cube_kaixin.png",
            "Heybox17": "Heybox/expression_cube_ku.png",
            "Heybox18": "Heybox/expression_cube_kun.png",
            "Heybox19": "Heybox/expression_cube_kuqi.png",
            "Heybox20": "Heybox/expression_cube_nu.png",
            "Heybox21": "Heybox/expression_cube_penshui.png",
            "Heybox22": "Heybox/expression_cube_qiliang.png",
            "Heybox23": "Heybox/expression_cube_shengqi.png",
            "Heybox24": "Heybox/expression_cube_shuijiao.png",
            "Heybox25": "Heybox/expression_cube_tanqi.png",
            "Heybox26": "Heybox/expression_cube_tanshou.png",
            "Heybox27": "Heybox/expression_cube_tu.png",
            "Heybox28": "Heybox/expression_cube_wa.png",
            "Heybox29": "Heybox/expression_cube_weiqu.png",
            "Heybox30": "Heybox/expression_cube_weixiao.png",
            "Heybox31": "Heybox/expression_cube_wulianku.png",
            "Heybox32": "Heybox/expression_cube_xia.png",
            "Heybox33": "Heybox/expression_cube_xiaocry.png",
            "Heybox34": "Heybox/expression_cube_xihuan.png",
            "Heybox35": "Heybox/expression_cube_xuexi.png",
            "Heybox36": "Heybox/expression_cube_yun.png",
            "Heybox37": "Heybox/expression_cube_zan.png"
        }
    })
    
</script>
</section>
    </div>
</div>


        <div class="nexmoe-post-right">
            <div class="nexmoe-fixed">
              <div class="nexmoe-tool">
                
                
                    
                        <button class="mdui-fab catalog" style="overflow:unset;">
                            <i class="nexmoefont icon-i-catalog"></i>
                            <div class="nexmoe-toc">
                              <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9C%AC%E5%9C%B0%E5%BA%94%E7%94%A8"><span class="toc-number">1.</span> <span class="toc-text">本地应用</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%86%85%E5%AE%B9%E7%BB%91%E5%AE%9A%EF%BC%8C%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A"><span class="toc-number">1.1.</span> <span class="toc-text">内容绑定，事件绑定</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#v-text"><span class="toc-number">1.1.1.</span> <span class="toc-text">v-text</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#v-htm"><span class="toc-number">1.1.2.</span> <span class="toc-text">v-htm</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#v-on%E5%9F%BA%E7%A1%80"><span class="toc-number">1.1.3.</span> <span class="toc-text">v-on基础</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%98%BE%E7%A4%BA%E5%88%87%E6%8D%A2%EF%BC%8C%E5%B1%9E%E6%80%A7%E7%BB%91%E5%AE%9A"><span class="toc-number">1.2.</span> <span class="toc-text">显示切换，属性绑定</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#v-show"><span class="toc-number">1.2.1.</span> <span class="toc-text">v-show</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#v-if"><span class="toc-number">1.2.2.</span> <span class="toc-text">v-if</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#v-bind"><span class="toc-number">1.2.3.</span> <span class="toc-text">v-bind</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%97%E8%A1%A8%E5%BE%AA%E7%8E%AF%EF%BC%8C%E8%A1%A8%E5%8D%95%E5%85%83%E7%B4%A0%E7%BB%91%E5%AE%9A"><span class="toc-number">1.3.</span> <span class="toc-text">列表循环，表单元素绑定</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#v-for"><span class="toc-number">1.3.1.</span> <span class="toc-text">v-for</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#v-on%E8%A1%A5%E5%85%85"><span class="toc-number">1.3.2.</span> <span class="toc-text">v-on补充</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#v-model"><span class="toc-number">1.3.3.</span> <span class="toc-text">v-model</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F"><span class="toc-number">2.</span> <span class="toc-text">生命周期</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0"><span class="toc-number">2.1.</span> <span class="toc-text">钩子函数</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#vue%E7%9A%84%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0%E6%9C%89%E5%9B%9B%E4%B8%AA%E8%BF%87%E7%A8%8B-%E5%AF%B9%E5%BA%94%E5%85%AB%E4%B8%AA%E5%87%BD%E6%95%B0"><span class="toc-number">2.1.1.</span> <span class="toc-text">vue的钩子函数有四个过程, 对应八个函数</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B7%B1%E5%BA%A6%E7%9B%91%E5%90%AC"><span class="toc-number">3.</span> <span class="toc-text">深度监听</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B8%B8%E8%A7%81%E7%9A%84%E4%B8%89%E7%A7%8D%E6%95%B0%E6%8D%AE%E6%9B%B4%E6%96%B0-%E8%A7%86%E5%9B%BE%E4%B8%8D%E6%9B%B4%E6%96%B0%E7%9A%84%E7%89%B9%E6%AE%8A%E6%83%85%E5%86%B5"><span class="toc-number">3.1.</span> <span class="toc-text">常见的三种数据更新,视图不更新的特殊情况</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B8%B8%E7%94%A8%E7%9A%84%E4%B8%A4%E7%A7%8D%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88"><span class="toc-number">3.2.</span> <span class="toc-text">常用的两种解决方案</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8C%87%E4%BB%A4%E4%BF%AE%E9%A5%B0%E7%AC%A6"><span class="toc-number">4.</span> <span class="toc-text">指令修饰符</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#vue%E4%B8%AD%E7%9A%84%E6%8C%87%E4%BB%A4%E4%BF%AE%E9%A5%B0%E7%AC%A6%E6%9C%89%E5%93%AA%E4%BA%9B"><span class="toc-number">4.1.</span> <span class="toc-text">vue中的指令修饰符有哪些?</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BB%84%E4%BB%B6"><span class="toc-number">5.</span> <span class="toc-text">组件</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E7%BB%84%E4%BB%B6"><span class="toc-number">5.1.</span> <span class="toc-text">什么是组件?</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BB%84%E4%BB%B6%E5%8C%96%E6%9C%89%E4%BB%80%E4%B9%88%E5%A5%BD%E5%A4%84"><span class="toc-number">5.2.</span> <span class="toc-text">组件化有什么好处?</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A6%82%E6%9E%9C%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E7%BB%84%E4%BB%B6"><span class="toc-number">5.3.</span> <span class="toc-text">如果创建一个组件?</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BB%84%E4%BB%B6%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8"><span class="toc-number">5.4.</span> <span class="toc-text">组件如何使用?</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BB%84%E4%BB%B6%E9%9C%80%E8%A6%81%E6%B3%A8%E6%84%8F%E7%9A%84%E7%BB%86%E8%8A%82"><span class="toc-number">5.5.</span> <span class="toc-text">组件需要注意的细节?</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E7%BB%84%E4%BB%B6%E4%B8%AD%E7%9A%84data%E6%98%AF%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0%E8%80%8C%E4%B8%8D%E6%98%AF%E5%AF%B9%E8%B1%A1"><span class="toc-number">5.6.</span> <span class="toc-text">为什么组件中的data是一个函数而不是对象?</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BC%A0%E5%80%BC"><span class="toc-number">6.</span> <span class="toc-text">传值</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%8F%92%E6%A7%BD"><span class="toc-number">6.1.</span> <span class="toc-text">插槽</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC"><span class="toc-number">6.2.</span> <span class="toc-text">组件传值</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#props"><span class="toc-number">6.3.</span> <span class="toc-text">props</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%88%B6%E7%BB%84%E4%BB%B6%E5%90%91%E5%AD%90%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC"><span class="toc-number">6.3.1.</span> <span class="toc-text">父组件向子组件传值:</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#slot%E6%8F%92%E6%A7%BD%E4%BC%A0%E5%80%BC-%E5%92%8C-props%E5%B1%9E%E6%80%A7%E4%BC%A0%E5%80%BC-%E7%9A%84%E5%BC%82%E5%90%8C%E7%82%B9"><span class="toc-number">6.3.2.</span> <span class="toc-text">slot插槽传值 和 props属性传值 的异同点?</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#emit"><span class="toc-number">6.4.</span> <span class="toc-text">emit</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AD%90%E7%BB%84%E4%BB%B6%E5%90%91%E7%88%B6%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC"><span class="toc-number">6.4.1.</span> <span class="toc-text">子组件向父组件传值:</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#bus%E6%80%BB%E7%BA%BF"><span class="toc-number">6.5.</span> <span class="toc-text">bus总线</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%85%84%E5%BC%9F%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC%EF%BC%9A"><span class="toc-number">6.5.1.</span> <span class="toc-text">兄弟组件传值：</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4"><span class="toc-number">7.</span> <span class="toc-text">自定义指令</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%BC%82%E6%AD%A5%E6%9B%B4%E6%96%B0"><span class="toc-number">8.</span> <span class="toc-text">异步更新</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%9B%91%E8%A7%86%E5%99%A8"><span class="toc-number">9.</span> <span class="toc-text">监视器</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#watch%E7%9B%91%E8%A7%86%E5%99%A8%E7%9A%84%E7%9B%91%E8%A7%86%E5%8E%9F%E7%90%86"><span class="toc-number">9.1.</span> <span class="toc-text">watch监视器的监视原理?</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%87%8D%E7%94%A8%E6%9C%BA%E5%88%B6"><span class="toc-number">10.</span> <span class="toc-text">重用机制</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%82%A3%E5%A6%82%E4%BD%95%E8%A7%A3%E5%86%B3%E9%87%8D%E7%94%A8%E6%9C%BA%E5%88%B6%E5%BC%8A%E7%AB%AF-%E5%A6%82%E4%BD%95%E9%81%BF%E5%85%8D%E9%87%8D%E7%94%A8%E6%9C%BA%E5%88%B6%E5%8F%91%E7%94%9F"><span class="toc-number">10.1.</span> <span class="toc-text">那如何解决重用机制弊端, 如何避免重用机制发生?</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7"><span class="toc-number">11.</span> <span class="toc-text">计算属性</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E6%98%AF%E5%A6%82%E4%BD%95%E7%BC%93%E5%AD%98%E6%95%B0%E6%8D%AE%E7%9A%84"><span class="toc-number">11.1.</span> <span class="toc-text">计算属性是如何缓存数据的?</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue%E5%9F%BA%E7%A1%80"><span class="toc-number">12.</span> <span class="toc-text">Vue基础</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Vue%E7%AE%80%E4%BB%8B"><span class="toc-number">12.1.</span> <span class="toc-text">Vue简介</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%AC%AC%E4%B8%80%E4%B8%AAVue%E7%A8%8B%E5%BA%8F"><span class="toc-number">12.2.</span> <span class="toc-text">第一个Vue程序</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#el%EF%BC%9A%E6%8C%82%E8%BD%BD%E7%82%B9"><span class="toc-number">12.2.1.</span> <span class="toc-text">el：挂载点</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#data%EF%BC%9A%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1"><span class="toc-number">12.2.2.</span> <span class="toc-text">data：数据对象</span></a></li></ol></li></ol></li></ol>
                            </div>
                        </button>
                        
                  
                
                  <a href="#nexmoe-content" class="toc-link" aria-label="回到顶部" title="top"><button class="mdui-fab mdui-ripple"><i class="nexmoefont icon-caret-top"></i></button></a>
                
              </div>
            </div>
        </div>
    </div>
  </div>
  <div id="nexmoe-pendant">
    <div class="nexmoe-drawer mdui-drawer nexmoe-pd" id="drawer">
        
            <div class="nexmoe-pd-item">
                <div class="clock">
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="needle" id="hours"></div>
        <div class="needle" id="minutes"></div>
        <div class="needle" id="seconds"></div>
        <div class="clock_logo">

        </div>

    </div>
<style>
    .clock {
        background-color: #ffffff;
        width: 70vw;
        height: 70vw;
        max-width: 70vh;
        max-height: 70vh;
        border: solid 2.8vw #242424;
        position: relative;
        overflow: hidden;
        border-radius: 50%;
        box-sizing: border-box;
        box-shadow: 0 1.4vw 2.8vw rgba(0, 0, 0, 0.8);
        zoom:0.2
    }

    .memory {
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: center;
    }

    .memory:nth-child(1) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(0deg) translateY(-520%);
    }

    .memory:nth-child(2) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(6deg) translateY(-1461%);
    }

    .memory:nth-child(3) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(12deg) translateY(-1461%);
    }

    .memory:nth-child(4) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(18deg) translateY(-1461%);
    }

    .memory:nth-child(5) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(24deg) translateY(-1461%);
    }

    .memory:nth-child(6) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(30deg) translateY(-520%);
    }

    .memory:nth-child(7) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(36deg) translateY(-1461%);
    }

    .memory:nth-child(8) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(42deg) translateY(-1461%);
    }

    .memory:nth-child(9) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(48deg) translateY(-1461%);
    }

    .memory:nth-child(10) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(54deg) translateY(-1461%);
    }

    .memory:nth-child(11) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(60deg) translateY(-520%);
    }

    .memory:nth-child(12) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(66deg) translateY(-1461%);
    }

    .memory:nth-child(13) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(72deg) translateY(-1461%);
    }

    .memory:nth-child(14) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(78deg) translateY(-1461%);
    }

    .memory:nth-child(15) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(84deg) translateY(-1461%);
    }

    .memory:nth-child(16) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(90deg) translateY(-520%);
    }

    .memory:nth-child(17) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(96deg) translateY(-1461%);
    }

    .memory:nth-child(18) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(102deg) translateY(-1461%);
    }

    .memory:nth-child(19) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(108deg) translateY(-1461%);
    }

    .memory:nth-child(20) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(114deg) translateY(-1461%);
    }

    .memory:nth-child(21) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(120deg) translateY(-520%);
    }

    .memory:nth-child(22) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(126deg) translateY(-1461%);
    }

    .memory:nth-child(23) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(132deg) translateY(-1461%);
    }

    .memory:nth-child(24) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(138deg) translateY(-1461%);
    }

    .memory:nth-child(25) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(144deg) translateY(-1461%);
    }

    .memory:nth-child(26) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(150deg) translateY(-520%);
    }

    .memory:nth-child(27) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(156deg) translateY(-1461%);
    }

    .memory:nth-child(28) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(162deg) translateY(-1461%);
    }

    .memory:nth-child(29) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(168deg) translateY(-1461%);
    }

    .memory:nth-child(30) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(174deg) translateY(-1461%);
    }

    .memory:nth-child(31) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(180deg) translateY(-520%);
    }

    .memory:nth-child(32) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(186deg) translateY(-1461%);
    }

    .memory:nth-child(33) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(192deg) translateY(-1461%);
    }

    .memory:nth-child(34) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(198deg) translateY(-1461%);
    }

    .memory:nth-child(35) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(204deg) translateY(-1461%);
    }

    .memory:nth-child(36) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(210deg) translateY(-520%);
    }

    .memory:nth-child(37) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(216deg) translateY(-1461%);
    }

    .memory:nth-child(38) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(222deg) translateY(-1461%);
    }

    .memory:nth-child(39) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(228deg) translateY(-1461%);
    }

    .memory:nth-child(40) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(234deg) translateY(-1461%);
    }

    .memory:nth-child(41) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(240deg) translateY(-520%);
    }

    .memory:nth-child(42) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(246deg) translateY(-1461%);
    }

    .memory:nth-child(43) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(252deg) translateY(-1461%);
    }

    .memory:nth-child(44) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(258deg) translateY(-1461%);
    }

    .memory:nth-child(45) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(264deg) translateY(-1461%);
    }

    .memory:nth-child(46) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(270deg) translateY(-520%);
    }

    .memory:nth-child(47) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(276deg) translateY(-1461%);
    }

    .memory:nth-child(48) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(282deg) translateY(-1461%);
    }

    .memory:nth-child(49) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(288deg) translateY(-1461%);
    }

    .memory:nth-child(50) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(294deg) translateY(-1461%);
    }

    .memory:nth-child(51) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(300deg) translateY(-520%);
    }

    .memory:nth-child(52) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(306deg) translateY(-1461%);
    }

    .memory:nth-child(53) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(312deg) translateY(-1461%);
    }

    .memory:nth-child(54) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(318deg) translateY(-1461%);
    }

    .memory:nth-child(55) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(324deg) translateY(-1461%);
    }

    .memory:nth-child(56) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(330deg) translateY(-520%);
    }

    .memory:nth-child(57) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(336deg) translateY(-1461%);
    }

    .memory:nth-child(58) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(342deg) translateY(-1461%);
    }

    .memory:nth-child(59) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(348deg) translateY(-1461%);
    }

    .memory:nth-child(60) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(354deg) translateY(-1461%);
    }

    .needle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: center;
    }

    .needle#hours {
        background-color: #1f1f1f;
        width: 4%;
        height: 30%;
        transform-origin: center 75%;
        transform: translate(-50%, -75%);
    }

    .needle#hours.moving {
        transition: transform 150ms ease-out;
    }

    .needle#hours:after {
        content: '';
        background-color: #1f1f1f;
        width: 4vw;
        height: 4vw;
        max-width: 4vh;
        max-height: 4vh;
        display: block;
        position: absolute;
        top: 75%;
        left: 50%;
        box-sizing: border-box;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }

    .needle#minutes {
        background-color: #1f1f1f;
        width: 2%;
        height: 45%;
        transform-origin: center 75%;
        transform: translate(-50%, -75%);
    }

    .needle#minutes.moving {
        transition: transform 150ms ease-out;
    }

    .needle#minutes:after {
        content: '';
        background-color: #1f1f1f;
        width: 4vw;
        height: 4vw;
        max-width: 4vh;
        max-height: 4vh;
        display: block;
        position: absolute;
        top: 75%;
        left: 50%;
        box-sizing: border-box;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }

    .needle#seconds {
        background-color: #cb2f2f;
        width: 1%;
        height: 50%;
        transform-origin: center 75%;
        transform: translate(-50%, -75%);
    }

    .needle#seconds.moving {
        transition: transform 150ms ease-out;
    }

    .needle#seconds:after {
        content: '';
        background-color: #cb2f2f;
        width: 2.5vw;
        height: 2.5vw;
        max-width: 2.5vh;
        max-height: 2.5vh;
        display: block;
        position: absolute;
        top: 75%;
        left: 50%;
        box-sizing: border-box;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }
    .clock_logo{
        width: 10vw;
        height: 10vw;
        max-width: 10vh;
        max-height: 10vh;
        position: absolute;
        top: 50%;
        left: 50%;
        box-sizing: border-box;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    @media (min-width: 100vh) {
        .clock {
            border: solid 2.8vh #242424;
            box-shadow: 0 1.4vh 2.8vh rgba(0, 0, 0, 0.8);
        }
    }

</style>





            </div>
        
            <div class="nexmoe-pd-item">
                <div class="qweather" >
    <div id="he-plugin-standard"></div>
    <div class="qweather-logo">

    </div>

</div>
<style>
    .qweather{
        position: relative;
    }
    .qweather-logo{
        position: absolute;
        right: 0;
        top: -15px;
        width: 40px;
        height: 40px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
</style>
<script>
  WIDGET = {
    "CONFIG": {
      "layout": "2",
      "width": "260",
      "height": "220",
      "background": "5",
      "dataColor": "0099FF",
      "borderRadius": "15",
      "key": "06114923535c446ea84c203a5e492a41"
    }
  }
</script>
<script src="https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0"></script>

            </div>
        
</div>
<style>
    .nexmoe-pd {
        left: auto;
        top: 40px;
        right: 0;
    }
    .nexmoe-pd-item{
       display: flex;
        justify-content: center;
        margin-bottom: 30px;
    }
</style>

  </div>
  <script src="https://cdn.jsdelivr.net/combine/npm/lazysizes@5.1.0/lazysizes.min.js,gh/highlightjs/cdn-release@9.15.8/build/highlight.min.js,npm/mdui@0.4.3/dist/js/mdui.min.js?v=1"></script>
<script>
	hljs.initHighlightingOnLoad();
</script>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>


<script src="/js/app.js?v=1695462045648"></script>

<script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.8.1/dist/js/jquery.justifiedGallery.min.js"></script>
<script>
	$(".justified-gallery").justifiedGallery({
		rowHeight: 160,
		margins: 10,
	});
</script>

  





<!-- hexo injector body_end start -->
<script src="/js/clock.js"></script>

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>

<script src="/lib/codeBlock/codeBlockFuction.js"></script>

<script src="/lib/codeBlock/codeLang.js"></script>

<script src="/lib/codeBlock/codeCopy.js"></script>

<script src="/lib/codeBlock/codeShrink.js"></script>

<link rel="stylesheet" href="/lib/codeBlock/matery.css">

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

<script src="/js/search.js"></script>

<script src="/js/webapp.js"></script>
<!-- hexo injector body_end end --><script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/assets/rem.model.json"},"display":{"position":"left","width":400,"height":400},"mobile":{"show":true,"scale":0.5},"react":{"opacityDefault":0.7,"opacityOnHover":0.8},"log":false});</script></body>
</html>

<script>(function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/f90b2d50.js","daovoice")</script>
<script>
  daovoice('init', {
    app_id: "f90b2d50"
  });
  daovoice('update');
</script>

